<template>
	<view class="order-wp">
		<!-- 商品详情 -->
		<goodsInfo :goodsInfo="goodsInfo"></goodsInfo>
		<!-- 数量选择 -->
		<view class="card flex_between_center">
			<view class="title1">
				数量
			</view>
			<view class="">
				<u-number-box :min="1" :max="100" :step="1" v-model="number">
					<view slot="minus" class="minus">
						<u-icon name="minus" size="25"></u-icon>
					</view>
					<text slot="input" class="input">{{number}}</text>
					<view slot="plus" class="minus">
						<u-icon name="plus" size="25"></u-icon>
					</view>
				</u-number-box>
			</view>
		</view>
		<!-- 联系人 -->
		<view class="card">
			<u--form errorType="message" labelWidth="auto" labelPosition="top" :model="model" :rules="rules"
				ref="formRef" :borderBottom="false" :labelStyle="{fontSize:'28rpx',color:'#1D2129',margin:'5rpx 0'}">
				<u-form-item label="收货人" prop="takePeople">
					<u--input maxlength="10" placeholderStyle="background:#f7f8fa;color:#C9CDD4"
						:custom-style="{padding:'10rpx 20rpx',lineHeight:'74rpx',fontSize:'28rpx',backgroundColor:'#F7F8FA',height:'74rpx'}"
						v-model="model.takePeople" border="none" placeholder="请填写收货人"></u--input>
				</u-form-item>
				<u-form-item label="收货地址" prop="address">
					<u--input maxlength="30" placeholderStyle="background:#f7f8fa;color:#C9CDD4"
						:custom-style="{padding:'10rpx 20rpx',lineHeight:'74rpx',fontSize:'28rpx',backgroundColor:'#F7F8FA',height:'74rpx'}"
						v-model="model.address" border="none" placeholder="请填写收货地址"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile">
					<u--input maxlength="11" placeholderStyle="background:#f7f8fa;color:#C9CDD4"
						:custom-style="{padding:'10rpx 20rpx',lineHeight:'74rpx',fontSize:'28rpx',backgroundColor:'#F7F8FA',height:'74rpx'}"
						v-model="model.mobile" border="none" placeholder="请填写联系电话"></u--input>
				</u-form-item>
				<view class="info-title1">
					*收货信息会发送至商家，由商家自行配送
				</view>
			</u--form>
		</view>
		<view class="pay-wp">
			<view class="pay-main" :style="{paddingBottom:showCoupon?'':'20rpx'}">
				<u-radio-group :borderBottom="true" iconPlacement="right" size="30" placement="column"
					v-model="payInfo.type">
					<view class="pay-item" v-if="payInfo.weChat">
						<u-radio iconSize="28" :name="2">
							<view class="pay-label flex-1">
								微信支付
							</view>
							<image src="https://file.casugn.com/storecompcard/temp/weixin_1704935744098.png"
								class="pay-img" @click="handlePayChange(2)">
							</image>

						</u-radio>
					</view>
					<view class="pay-item" v-if="payInfo.aliPay">
						<u-radio iconSize="28" :name="1">
							<view class="pay-label flex-1">
								支付宝支付
							</view>
							<image src="https://file.casugn.com/storecompcard/temp/zhifubao_1704935727424.png"
								class="pay-img" @click="handlePayChange(1)">
							</image>

						</u-radio>
					</view>

					<view class="pay-item" v-if="payInfo.rests">
						<u-radio iconSize="28" :name="3">
							<view class="pay-label flex-1">
								其他支付
							</view>
							<image src="https://file.casugn.com/storecompcard/temp/qita_1704935757198.png"
								class="pay-img" @click="handlePayChange(3)">
							</image>
						</u-radio>
					</view>
				</u-radio-group>
				<!-- <view class="coupon-item" @click="goToChooseCoupon" v-if="showCoupon && goodsInfo.voucher==1">
					<view class="left flex-1 flex_start_center" style="flex: 1;">
						<image src="https://file.casugn.com/storecompcard/temp/quan_1704943148990.png" mode=""
							style="width: 40rpx;height: 40rpx;"></image>
						<view class="flex-1" style="margin-left: 20rpx;">
							选择代金券
						</view>
					</view>
					<view class="right flex_start_center">
						<view class="count" v-if="count>0">
							-￥{{count}}
						</view>
						<image src="https://file.casugn.com/storecompcard/temp/direction／right_1704936247334.png"
							mode="" style="height: 40rpx;width: 40rpx;"></image>
					</view>

				</view> -->
			</view>
		</view>
		<!-- 提交 -->
		<view class="bottom-box">
			<view class="submit-wp">
				<view style="width: 102rpx;font-size: 28rpx;color: #86909C;">
					共{{number}}件,
				</view>
				<view style="width: 84rpx;height: 40rpx;font-size: 28rpx;">
					合计：
				</view>
				<view class="totalPrice u-line-1">
					￥ {{totalPrice}}
				</view>
				<u-button @click="showOrderPop" :custom-style="{
			  background:'#276aee',
			  borderRadius:'168rpx',
			  color: '#fff',
			  width: '192rpx',
			  border:'none'
			}">提交订单</u-button>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="showPopup" mode="center" :safeAreaInsetBottom="false">
			<view class="popup-wp">
				<view class="title">
					{{payInfo.type==1?'支付宝支付':payInfo.type==2?'微信支付':'其他方式支付'}}
				</view>
				<view class="title2" v-if="payInfo.type==1 ||payInfo.type==2">
					本平台不涉及资金往来,请扫商家收款码进行支付
				</view>
				<view class="qrcode flex_center">
					<image v-if="payInfo.type==1 " :src="payInfo.aliPay" mode="" style="height: 240rpx;width: 240rpx;">
					</image>
					<image v-if="payInfo.type==2" :src="payInfo.weChat" mode="" style="height: 240rpx;width: 240rpx;">
					</image>
					<textarea disabled v-model='payInfo.rests' :height="90" v-if="payInfo.type==3"
						style="background:#fff;width: 100%;height: 180rpx;" />
				</view>
				<view class="title3">
					<view class="btn1" @click="closePop">
						取消支付
					</view>
					<view class="btn2" @click="submitOrder">
						完成支付
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import goodsInfo from '@/pagesMall/components/goodsInfo/goodsInfo.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			goodsInfo
		},
		data() {
			return {
				number: 1,
				goodsId: '',
				goodsInfo: {},
				orderInfo: {},
				model: {
					takePeople: '',
					address: '',
					mobile: ''
				},

				payType: {},
				couponCount: 0,
				showPopup: false,
				rules: {
					takePeople: [{
						required: true,
						message: '请输入收货人',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '请输入收货地址',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
					}]
				},
				showCoupon: false,
				payInfo: {},
				goodsOwnerOpenId: ''
			};
		},
		onLoad(opt) {
			console.log(opt);
			if (opt.goodsId) {
				this.goodsId = opt.goodsId
				this.goodsOwnerOpenId = opt.openId
				this.showCoupon = opt.hiddenBuyBtn == 1 ? false : true
				this.getGoodsInfo()
				this.getPayInfo()
			}
		},
		onShow() {

		},
		onReady() {
			this.$refs.formRef.setRules(this.rules)
		},
		computed: {
			...mapGetters(['userInfo']),
			totalPrice() {
				let val = this.number * this.goodsInfo.price - this.couponCount
				if (val && val > 0) {
					let value = Math.round(parseFloat(val) * 100) / 100;
					let valMoney = value.toString().split(".");
					if (valMoney.length == 1) {
						value = value.toString() + ".00";
						return value;
					}
					if (valMoney.length > 1) {
						if (valMoney[1].length < 2) {
							value = value.toString() + "0";
						}
						return value;
					}
					return value;
				} else {
					return "0.00";
				}
			}
		},

		methods: {
			closePop() {
				this.showPopup = false
			},
			showOrderPop() {
				if (!this.payInfo.type) {
					uni.showToast({
						icon: 'none',
						title: '请选择支付方式'
					})
					return
				}
				// this.$refs.formRef.clearValidate()
				let that = this
				this.$refs.formRef.validate().then(async res => {
					that.showPopup = true

				})

			},
			handlePayChange(index) {
				this.payInfo.type = index
			},
			async getPayInfo() {
				let {
					success,
					code,
					result
				} = await this.$api.getPayInfo({
					openId: this.goodsOwnerOpenId
				})
				if (code == 200 && success) {
					this.payInfo = result
				}
			},
			async submitOrder() {
				console.log('submitOrder');
				let {
					openid
				} = uni.getStorageSync('openId')
				let payable = Number(this.totalPrice)
				let payload = {
					...this.goodsInfo,
					...this.model,
					give: 0,
					payable,
					purchaseOpenId: openid,
					shopOpenId: this.goodsOwnerOpenId,
					shopType: 2,
					prodId: this.goodsInfo.id,
					num: this.number,
					voucher: 0, //大礼包不使用代金券
					id: '',
					createTime: ''
				}
				console.log(payload);
				let {
					success,
					code,
					result,
					message
				} = await this.$api.addShopOrder(payload)
				if (code == 200 && success) {
					uni.showToast({
						icon: 'none',
						title: message
					})
					this.showPopup = false
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)

				} else {
					uni.showToast({
						icon: 'none',
						title: message
					})
				}
			},
			goToChooseCoupon() {
				uni.navigateTo({
					url: '/pagesMall/coupon/myCoupon'
				})
			},
			// handleChange({
			// 	name
			// }) {
			// 	this.payType = name
			// 	let item = this.payTypeList.find(item => item.name == this.payType)
			// 	console.log(item);
			// },
			async getGoodsInfo() {
				let res = await this.$api.getMsGiftPacksPageDetail({
					id: this.goodsId,
					openId: this.goodsOwnerOpenId
				})
				if (res.success) {
					this.goodsInfo = res.result
					this.goodsList = res.result.msGiftProdVOList || []
				} else {
					this.goodsInfo = {}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-wp {
		padding-top: 32rpx;
		background-color: #E5E6EB;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);

		.info-title1 {
			width: 482rpx;
			height: 36rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #C9CDD4;
			line-height: 36rpx;
		}

		.submit-wp {
			margin: 16rpx 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.totalPrice {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FF3131;
				line-height: 50rpx;
				margin: 0 20rpx;

			}


		}

		.pay-wp {
			border-radius: 16rpx;
			margin: 32rpx;

			background-color: #fff;

			.pay-main {
				.coupon-item {
					padding: 0 32rpx;
					height: 108rpx;
					display: flex;
					align-items: center;
				}

				.pay-item {

					padding: 17rpx 32rpx 0 32rpx;
					height: 108rpx;
					display: flex;

					.count {
						margin-right: 20rpx;
						height: 40rpx;
						font-size: 30rpx;
						font-weight: 600;
						color: #FF3131;
						line-height: 39rpx;

					}

					.pay-img {
						width: 40rpx;
						height: 40rpx;
					}

					.pay-label {
						width: 518rpx;
						margin: 0 20rpx;
						height: 44rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #1D2129;
						line-height: 44rpx;

					}
				}

				.chooseCoupon {
					padding: 0 32rpx;
					height: 108rpx
				}
			}
		}
	}

	.title1 {
		width: 64rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #1D2129;
		line-height: 44rpx;

	}

	.card {
		margin: 24rpx 32rpx;
		padding: 24rpx;
		border-radius: 16rpx;
		background-color: #fff;
	}

	.popup-wp {
		padding: 50rpx;

		.title {
			height: 48rpx;
			font-size: 34rpx;
			font-weight: 400;
			color: #1D2129;
			line-height: 40rpx;
		}

		.qrcode {
			margin-top: 40rpx;
		}

		.title2 {
			margin-top: 24rpx;
			width: 464rpx;
			height: 84rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #86909C;
			line-height: 42rpx;

		}

		.title3 {
			margin-top: 40rpx;
			display: flex;
			justify-content: flex-end;

			.btn1 {
				width: 120rpx;
				height: 42rpx;
				font-size: 30rpx;
				color: #86909C;
				line-height: 35rpx;

			}

			.btn2 {
				margin-left: 56rpx;
				width: 120rpx;
				height: 42rpx;
				font-size: 30rpx;
				color: #1A74FF;
				line-height: 35rpx;

			}
		}
	}
</style>
<style lang="scss">
	// page {
	// 	height: 100%;
	// 	background-color: #E5E6EB;
	// }

	.minus {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f7f8fa;
		color: #000;
	}

	.input {
		padding: 0 30rpx;
		color: #000;
	}
</style>